<template>
  <div>
    <el-breadcrumb separator="/" style="padding-bottom: 10px;">
      <el-breadcrumb-item>我的工作台</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/order/list' }">订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <div slot="header" class="clearfix" style="text-align: left;">
        <span>订单详情</span>
      </div>
      <el-table
        :data="orderDetail.orderItems"
        border
        style="width: 100%; margin-top: 20px">
        <el-table-column
          prop="barcode"
          label="商品条码">
        </el-table-column>
        <el-table-column
          prop="name"
          label="商品名称">
        </el-table-column>
        <el-table-column
          label="商品价格">
          <template slot-scope="scope">
            {{ scope.row.price + ' 元' }}
          </template>
        </el-table-column>
        <el-table-column
          label="商品数量">
          <template slot-scope="scope">
            {{ scope.row.quantity + ' (' + scope.row.unit + ')' }}
          </template>
        </el-table-column>
        <el-table-column
          label="商品总价">
          <template slot-scope="scope">
            {{ scope.row.price * scope.row.quantity + ' 元' }}
          </template>
        </el-table-column>
      </el-table>
      <div>合计：{{ orderDetail.totalAmount + ' 元' }}</div>
      <div>下单时间：{{ orderDetail.createdAt }}</div>
    </el-card>
  </div>
</template>
<script>
import orderService from '@/global/service/orderService';

export default {
  data() {
    return {
      orderDetail: {},
    }
  },
  created() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      orderService.get(this.$route.params.id)
        .then((res) => {
          console.log(res)
          this.orderDetail = res
        })

    },
  },
}
</script>
